<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); margin-bottom:14px"
      title="SKU详情"
      @back="() => $router.go(-1)"
    >
    </a-page-header>

    <div>
      <a-spin :spinning="spinning" tip="正在加载, 请稍候...">
        <a-descriptions bordered>
          <a-descriptions-item label="WPC">
            {{ sku.track_code }}
          </a-descriptions-item>
          <a-descriptions-item label="SKU编码">
            {{ sku.code }}
          </a-descriptions-item>
          <a-descriptions-item label="产品编码">
            {{ sku.product_code }}
          </a-descriptions-item>
          <a-descriptions-item label="SKU名称" :span="3">
            {{ sku.subject }}
          </a-descriptions-item>
          <a-descriptions-item label="海外仓库">
            {{ sku.warehouse }}
          </a-descriptions-item>
          <a-descriptions-item label="销售单位">
            {{ sku.sell_unit }}
          </a-descriptions-item>
          <a-descriptions-item label="包装形态">
            <span v-if="sku.wrapping == 1">硬包装</span>
            <span v-if="sku.wrapping == 2">软包装</span>
          </a-descriptions-item>
          <a-descriptions-item label="包装材质">
            {{ sku.package_material }}
          </a-descriptions-item>
          <a-descriptions-item label="重量">
            {{ sku.weight }} KG
          </a-descriptions-item>
          <a-descriptions-item label="长*宽*高">
            {{ sku.length + "*" + sku.width + "*" + sku.height }} CM
          </a-descriptions-item>
          <a-descriptions-item label="特性">
            <div
              v-for="(chara, index) in sku.characteristic"
              :key="index"
              style="margin-right:5px;display:inline"
            >
              <span v-if="chara == 1">带插座</span>
              <span v-if="chara == 2">带液体</span>
              <span v-if="chara == 3">带光盘</span>
              <span v-if="chara == 4">易碎品</span>
              <span v-if="chara == 5">带粉末</span>
              <span v-if="chara == 6">膏状</span>
              <span v-if="chara == 7">贵重货品</span>
              <span v-if="chara == 8">恒温保存</span>
              <span v-if="chara == 9">危险货品</span>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="包装类型">
            <span v-if="sku.logistics_package == 1">自带物流包装</span>
            <span v-else>无</span>
          </a-descriptions-item>
          <a-descriptions-item label="电池标识">
            <span v-if="sku.is_battery == 2">带有电池</span>
            <span v-else>不带电池</span>
          </a-descriptions-item>
          <a-descriptions-item label="电池配置">
            {{ sku.battery_config || "无" }}
          </a-descriptions-item>
          <a-descriptions-item label="电池类型">
            {{ sku.battery_type || "无" }}
          </a-descriptions-item>
          <a-descriptions-item label="电池功率">
            {{ sku.battery_power || "无" }}
          </a-descriptions-item>
          <a-descriptions-item label="电池数量">
            {{ sku.battery_number || "无" }}
          </a-descriptions-item>
          <a-descriptions-item label="MSDS">
            <a
              :href="url"
              v-for="(url, index) in sku.battery_msds"
              :key="index"
            >
              文件{{ index + 1 }}
            </a>
          </a-descriptions-item>
          <a-descriptions-item label="SN码管理">
            <span v-if="sku.is_sn == 2">是</span>
            <span v-else>否</span>
          </a-descriptions-item>
          <a-descriptions-item label="SN码规则">
            {{ sku.sn_rule || "无" }}
          </a-descriptions-item>
          <a-descriptions-item label="销售采购链接">
            <a
              :href="link"
              v-for="(link, index) in sku.sales_link"
              :key="index"
            >
              链接{{ index + 1 }}
            </a>
          </a-descriptions-item>

          <a-descriptions-item label="阿里巴巴SKU">
            {{ sku.alibaba_sku }}
          </a-descriptions-item>
          <a-descriptions-item label="规格属性" :span="3">
            {{ sku.specification }}
          </a-descriptions-item>
          <a-descriptions-item label="备注" :span="3">
            {{ sku.remark }}
          </a-descriptions-item>

          <a-descriptions-item label="图片信息" :span="3">
            <img
              :src="thumb"
              v-for="(thumb, index) in sku.thumbs"
              :key="index"
              alt=""
              width="15%"
            />
          </a-descriptions-item>
        </a-descriptions>
      </a-spin>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sku: { track_code: "" },
      spinning: false
    };
  },
  created() {
    this.fetchIndexData();
  },
  methods: {
    fetchIndexData() {
      this.spinning = true;
      this.$axios
        .get(
          process.env.VUE_APP_BACKGROUND_API +
            "/api/sku/" +
            this.$route.params.id
        )
        .then(response => {
          if (response.data.ret == "err") {
            this.$message.error(response.data.msg);
          } else {
            this.spinning = false;
            this.sku = response.data.data;
          }
        });
    }
  }
};
</script>
